<template>
  <div id="app">
    <div class="header flex">
      <i @click="$router.go(-1)" v-if="!isReturn" class="el-icon-arrow-left"></i>
      <div class="title">{{ title }}</div>
    </div>
    <div class="main flex">
      <nav-menu v-if="navIsShow"></nav-menu>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import NavMenu from "@/components/navmenu";
export default {
  name: "App",
  components: {
    NavMenu,
  },
  data() {
    return {
      title: "友邦保险",
      navIsShow: true,
      isReturn:false
    };
  },
  watch: {
    router(val){
      if(val.meta.hidden){
        this.navIsShow = false;
      }else{
        this.navIsShow = true;
      }
      if(val.meta.isReturn){
        this.isReturn = false;
      }else{
        this.isReturn = true;
      }
      this.title = val.meta.title;
    }
  },
  computed: {
    router() {
      return this.$route
    },
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
#app {
  height: 100%;
  .header{
    height: 0.6rem;
    justify-content: center;
    align-items: center;
    background: #fafafa;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
    .title {
      color: #000;
      font-size: 0.18rem;
      flex: 1;
      text-align: center;
    }
    i {
      margin-left: 0.2rem;
      font-size: 0.24rem;
      color: #666666;
    }
  }
  .main {
    height: calc(100% - 0.60rem);
    overflow: hidden;
    background: linear-gradient(to bottom, #ec247b, #d41045);
    .content {
      flex: auto;
      height: 100%;
      overflow-y: auto;
      background: #FCFBFC;
      box-sizing: border-box;
    }
    .content.active {
      border-top-left-radius: 0.13rem;
      border-bottom-left-radius: 0.13rem;
    }
  }
}
</style>
